<template>
  <!-- 首页 -->
  <view class="home">
    <!-- 头部图片 -->
    <view class="header"
      ><image src="../../static/images/logo2.png"></image
    ></view>
    <!-- 中间区域 -->
    <view class="select">
      <!-- 通知 -->
      <view class="notice" v-if="notice">
        <uni-icons
          class="notice_icon"
          type="sound-filled"
          size="17"
          color="#FF9307"
        ></uni-icons>
        <view class="notice_container" id="noticeContainer">
          <text
            class="notice_text"
            :style="{ marginLeft: scroll + 'px' }"
            id="noticeText"
            >{{ notice }}</text
          >
        </view>
      </view>
      <!-- 车站起始 -->
      <view class="station">
        <view class="start">
          <view class="top">出发地</view>
          <view class="bottom">{{ stationStart.stationName || "请选择" }}</view>
        </view>
        <view class="end" @click="selectCity('end')">
          <view class="top">到达地</view>
          <view
            class="bottom"
            :class="{ placeholder: !stationEnd.stationName }"
            >{{ stationEnd.stationName || "请选择到达站" }}</view
          >
        </view>
        <!-- 日期选择 -->
        <view class="data_picker">
          <view class="top">出发日期</view>
          <!-- <uni-icons @click="dateChange('prev')" class="notice_icon" type="arrowleft" size="20" color="#666666"></uni-icons> -->
          <view class="date bottom" @click="open">
            <text>{{ currentDate | formatDateChinese }}</text>
            <text class="week">{{ currentDate | formatDayOfTheWeek }}</text>
            <text class="desc">{{ currentDate | formatDayN3d }}</text>
          </view>
          <uni-icons
            @click="dateChange('next')"
            class="notice_icon"
            type="arrowright"
            size="20"
            color="#666666"
          ></uni-icons>
        </view>
      </view>
      <!-- 查询按钮 -->
      <button
        class="btn"
        :class="{ disabled: !stationEnd.stationName }"
        type="primary"
        @click="goTicketList"
      >
        查询汽车票
      </button>
    </view>
    <!-- uni-app 日历 -->
    <uni-calendar
      ref="calendar"
      :insert="false"
      :lunar="true"
      :start-date="startDate"
      :end-date="endDate"
      @confirm="confirm"
    ></uni-calendar>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// components
import uniCalendar from "@dcloudio/uni-ui/lib/uni-calendar/uni-calendar.vue";
import uniIcons from "@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue";
import { $saleStationsDepart, $notice } from "../../service/index";
import { myShowModal } from "../../utils/utils";

export default {
  components: { uniCalendar, uniIcons },
  data() {
    return {
      notice: "", // 通知内容
      currentDate: this.$dayjs().format("YYYY-MM-DD"), // 当前选择日期
      startDate: this.$dayjs().format("YYYY-MM-DD"), // 日历开始日期
      endDate: this.$dayjs()
        .add(2, "month")
        .format("YYYY-MM-DD"), // 日历结束日期
      scroll: 0,
      timer: null,
    };
  },
  //定义过滤器
  filters: {},
  computed: mapState(["info", "stationStart", "stationEnd"]),
  watch: {},
  methods: {
    ...mapMutations([
      "updateInfo",
      "cancelRequest",
      "updateStationStart",
      "updateOrderType",
    ]),
    // 打开日历
    open() {
      this.$refs.calendar.open();
    },
    getElSize(id) {
      //得到元素的size
      return new Promise((res, rej) => {
        uni
          .createSelectorQuery()
          .select("#" + id)
          .fields(
            {
              size: true,
              scrollOffset: true,
            },
            (data) => {
              res(data.width);
            }
          )
          .exec();
      });
    },
    async move() {
      let container = await this.getElSize("noticeContainer");
      let text = await this.getElSize("noticeText");
      clearInterval(this.timer);
      if (container > text) {
        this.scroll = 0;
        return;
      } else {
        console.log(text - container);
        this.scroll = 20;
        let tag = container - text - 20;
        this.timer = setInterval(() => {
          this.scroll--;
          if (this.scroll <= tag) {
            this.scroll = 0;
          }
        }, 40);
      }
    },
    // 确定选择日历日期
    confirm(e) {
      this.currentDate = e.fulldate;
    },
    // 箭头切换日期
    dateChange(type) {
      const currentDate = this.currentDate;
      switch (type) {
        case "prev":
          const prevDate = this.$dayjs(currentDate)
            .add(-1, "day")
            .format("YYYY-MM-DD");
          if (this.$dayjs(prevDate).diff(this.startDate, "day") < 0) {
            uni.showToast({
              title: "查询日期不可早于今天",
              icon: "none",
            });
            return;
          }
          this.currentDate = prevDate;
          break;
        case "next":
          const nextDate = this.$dayjs(currentDate)
            .add(1, "day")
            .format("YYYY-MM-DD");
          if (this.$dayjs(nextDate).diff(this.endDate, "day") > 0) {
            uni.showToast({
              title: "超出日期选择范围~",
              icon: "none",
            });
            return;
          }
          this.currentDate = nextDate;
          break;
        default:
          break;
      }
    },
    // 去查询车次
    goTicketList() {
      if (!this.stationStart.merchantNo) {
        uni.showToast({
          title: "请先选择出发站点",
          icon: "none",
        });
        return;
      }
      if (!this.stationEnd.stationName) {
        uni.showToast({
          title: "请先选择到达站点",
          icon: "none",
        });
        return;
      }
      uni.navigateTo({
        url: "../../home/ticketList/ticketList?date=" + this.currentDate,
      });
    },
    // 选择热门站点 默认为出发站点
    selectHotStation(e) {
      console.log(e);
    },
    // 选择起始站点
    selectCity(type) {
      switch (type) {
        case "start":
          $saleStationsDepart({
            appId: uni.getAccountInfoSync().miniProgram.appId,
          }).then((res) => {
            console.log(res.data.content.stationName);
            this.updateStationStart({
              stationName: res.data.content.stationName,
              merchantNo: res.data.content.merchantNo,
            });
          });
          break;
        case "end":
          if (!this.stationStart.stationName) {
            uni.showToast({
              title: "请先选择出发站点",
              icon: "none",
            });
            return;
          }
          uni.navigateTo({
            url: `../../home/StationsDest/StationsDest`,
          });
          break;
        default:
          break;
      }
    },
  },
  onLoad() {},
  onShow() {
    //切换页面重置订单查询状态
    this.updateOrderType("orderAll");
    if (!this.stationStart.stationName) {
      $saleStationsDepart({
        appId: uni.getAccountInfoSync().miniProgram.appId,
      }).then((res) => {
        let data = res.data;
        if (!data.success) {
          myShowModal(data.message || "网络错误");
          return;
        }
        this.updateStationStart({
          stationName: data.content.stationName,
          merchantNo: data.content.merchantNo,
        });
      });
    }
    $notice(uni.getAccountInfoSync().miniProgram.appId).then((res) => {
      console.log(res.data.success);

      if (!res.data.success) {
        myShowModal(res.data.message);
        return;
      }
      if (!res.data.content.content) {
        this.notice = "";
        return;
      }
      this.notice = res.data.content.content;
      this.$nextTick(() => {
        this.move();
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.header {
  image {
    width: 100%;
    height: 360rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.select {
  width: 100%;
  position: relative;
  //   top: -112rpx;
  margin-top: 248rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 24rpx;
  overflow: hidden;
}
.notice {
  margin: 20rpx auto 0;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(254, 112, 42, 1);
  width: 640rpx;
  height: 72rpx;
  line-height: 72rpx;
  background: rgba(255, 147, 7, 0.08);
  border-radius: 12rpx;
  position: relative;
}
.notice_icon {
  margin: 0 19rpx 0 27rpx;
  vertical-align: -3rpx;
}
.notice_container {
  position: absolute;
  top: 0;
  left: 80rpx;
  width: 540rpx;
  word-break: keep-all;
  overflow: hidden;
  letter-spacing: 2rpx;
}
.notice_text {
  white-space: nowrap;
}
.station {
  overflow: hidden;
  width: 100%;
  > view {
    height: 176rpx;
    margin: 0 32rpx;
    border-bottom: 1px solid rgba(230, 235, 244, 1);
    overflow: hidden;
    padding-left: 28rpx;
    position: relative;
  }
  // .left {
  // 	width: 240rpx;
  // }
  // .middle {
  // 	width: 148rpx;
  // 	.icon_wraper {
  // 		width: 64rpx;
  // 		margin: 0 auto;
  // 		position: relative;
  // 		top: 48rpx;
  // 		.qc {
  // 			width: 44rpx;
  // 			height: 24rpx;
  // 			display: block;
  // 			position: relative;
  // 			left: 4rpx;
  // 		}
  // 		.jt {
  // 			width: 64rpx;
  // 			height: 12rpx;
  // 			display: block;
  // 		}
  // 	}
  // }
  // .right {
  // 	width: 240rpx;
  // }
  .top {
    font-size: 24rpx;
    height: 24rpx;
    line-height: 24rpx;
    font-family: PingFang SC;
    margin-top: 49rpx;
    font-weight: 300;
    color: rgba(130, 141, 162, 1);
  }
  .bottom {
    font-size: 36rpx;
    height: 36rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    margin-top: 29rpx;
  }
  .placeholder {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 300;
    color: rgba(130, 141, 162, 1);
  }
}
.data_picker {
  // padding: 73rpx 0 61rpx 0;
  .notice_icon {
    position: absolute;
    top: 107rpx;
    right: 28rpx;
  }
  .date {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    .week {
      margin: 0 20rpx;
    }
    .desc {
      font-weight: normal;
      font-size: 28rpx;
    }
  }
}

.btn {
  margin: 88rpx auto 0;
  padding: 0;
  width: 560rpx;
  height: 88rpx;
  background: linear-gradient(
    90deg,
    rgba(34, 100, 255, 1) 0%,
    rgba(52, 133, 255, 1) 99%
  );
  // box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(25, 102, 255, 0.32);
  border-radius: 44rpx;
  line-height: 88rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: 0;
  outline: none;
}
.disabled {
  background: rgba(209, 215, 225, 1);
}

// .hot_station {
//   width: 686rpx;
//   margin: 0 auto;
//   position: relative;
//   top: -50rpx;
//   .title {
//     font-size: 32rpx;
//     font-family: PingFangSC;
//     font-weight: 700;
//     color: rgba(51, 51, 51, 1);
//     margin-bottom: 40rpx;
//   }
//   .list {
//     display: flex;
//     justify-content: space-between;
//     flex-wrap: wrap;
//     .item {
//       width: 32%;
//       line-height: 60rpx;
//       text-align: center;
//       margin-bottom: 24rpx;
//       background: rgba(244, 246, 249, 1);
//       border-radius: 30rpx;
//       font-size: 24rpx;
//       font-family: PingFangSC;
//       font-weight: 300;
//       color: rgba(102, 102, 102, 1);
//     }
//   }
// }
</style>
